<template>
    <div class="auditBox">
        <div>
            <div class="info">
                <div class="title">
                    <div class="name">{{result.name}}</div>
                    <span class="registrationOut" v-if="role==2">出门登记</span>
                    <span class="registrationInp" v-if="role==1">进门登记</span>
                </div>
                <ul>
                    <li>
                        <div>手机号：</div>
                        <div>{{result.phone}}</div>
                    </li>
                    <li>
                        <div>身份证号：</div>
                        <div>
                            {{result.cardId}}
                        </div>
                    </li>
                    <li>
                        <div>住址：</div>
                        <div>{{result.address}}</div>
                    </li>
                    <li>
                        <div>所属科室：</div>
                        <div>{{result.hsDepartment}}</div>
                    </li>
                </ul>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1.5rem" :show-message="false"
                     :label-position="'top'" class="form clearfix">
                <el-form-item label="体温状态" prop="temperature">

                    <checker v-model="ruleForm.temperature" default-item-class="ckecker-item"
                             selected-item-class="active">
                        <checker-item :value="item" v-for="(item, index) in temperatureList" :key="index">
                            <template v-if="item.value=='正常'">
                                <el-image :src="normalUrl" fit="contain"
                                          v-show="ruleForm.temperature.key!=item.key"></el-image>
                                <el-image :src="normalUrlC" fit="contain"
                                          v-show="ruleForm.temperature.key==item.key"></el-image>
                            </template>
                            <template v-else>
                                <el-image :src="feverUrl" fit="contain"
                                          v-show="ruleForm.temperature.key!=item.key"></el-image>
                                <el-image :src="feverUrlC" fit="contain"
                                          v-show="ruleForm.temperature.key==item.key"></el-image>
                            </template>
                        </checker-item>
                    </checker>
                </el-form-item>
                <el-form-item label="温度(℃)" prop="degree" v-if="ruleForm.temperature&&ruleForm.temperature.key==2">
                    <el-input v-model="ruleForm.degree" placeholder="请输入温度" size="small"></el-input>
                </el-form-item>
                <el-form-item class="custom-label" prop="isDrive">
                    <div slot="label" class="is-required clearfix">
                        <inline-x-switch v-model="ruleForm.isDrive" @on-change="switchChange"></inline-x-switch>
                        是否开车
                    </div>
                </el-form-item>
                <el-form-item class="custom-label" prop="carNum" v-if="ruleForm.isDrive">
                    <el-input v-model="ruleForm.carNum" placeholder="请输入车牌号" size="small" @focus="focus"
                              :readonly="true"></el-input>
                </el-form-item>
            </el-form>
            <!--            <alert v-model="appointmentToday" class="appointment">-->
            <!--                <div>是否马上外出</div>-->
            <!--            </alert>-->
            <confirm v-model="showNormal"
                     content="是否确认提交"
                     @on-confirm="submitForm(0)"
                     @on-cancel="onCancelN"></confirm>
            <confirm v-model="showFever"
                     content="是否确认提交"
                     :close-on-confirm="false"
                     @on-confirm="submitForm(1)"
                     @on-cancel="onCancelF">
                <group class="degreeInp">
                    <x-input :title="'温度(℃)：'" type="number" :placeholder="'请输入温度'" v-model="degree" :show-clear="false"
                             @on-blur="$method.inputBlur()"></x-input>
                </group>
            </confirm>
        </div>

        <el-button-group class="submit clearfix">
            <div class="primary" @click="submitForm('ruleForm')">提交</div>
        </el-button-group>
        <car-num-pop v-if="showCarPop" :carNum="ruleForm.carNum" @saveCarNum="saveCarNum"></car-num-pop>
    </div>
</template>

<script>
    import {
        Group,
        XSwitch,
        Confirm,
        XInput,
        InlineXSwitch,
        Checker,
        CheckerItem
    } from 'vux'
    import carNumPop from '../components/carNum'

    export default {
        data() {
            let carNumRule = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/,
                validateDegree = (rule, value, callback) => {
                    if (Number(value) < 37 || Number(value) > 42) {
                        callback(new Error('温度应在37-42度之间'))
                    } else {
                        callback()
                    }
                },
                validateCarNum = (rule, value, callback) => {
                    if (!carNumRule.test(value)) {
                        callback(new Error('车牌格式错误'))
                    } else {
                        callback()
                    }
                }
            return {
                showCarPop: false,
                showNormal: false,
                showFever: false,
                degree: '',
                normalUrl: '../../static/images/nomalUn@3x.png',
                normalUrlC: '../../static/images/nomalC@3x.png',
                normalFlag: true,
                feverUrl: '../../static/images/hotUn@3x.png',
                feverUrlC: '../../static/images/hotC@3x.png',
                feverFlag: true,
                goOutValue: false,
                appointmentToday: false,
                role: null,
                result: {
                    name: '',
                    idType: '',
                    cardId: '',
                    idCardImg: [],
                    phone: '',
                    address: '',
                    hsDepartment: '',
                    type: '',
                    degree: '',
                    familyMember: [],
                    appointmentTime: '',
                    appointmentToday: false,
                    recordCount: 0 // 扫码记录次数
                },
                degreeData: [['37.3', '37.4', '37.5', '37.6', '37.7', '37.8', '37.9',
                    '38', '38.1', '38.2', '38.3', '38.4', '38.5', '38.6', '38.7', '38.8', '38.9',
                    '39', '39.1', '39.2', '39.3', '39.4', '39.5', '39.6', '39.7', '39.8', '39.9', '40']],
                tk: '',
                ruleForm: {
                    state: '',
                    temperature: '',
                    degree: '',
                    isDrive: false,
                    carNum: ''
                },
                rules: {
                    temperature: [
                        {required: true, message: '请选择体温状态', trigger: 'change'}
                    ],
                    degree: [
                        {required: true, message: '请填写温度', trigger: 'blur'},
                        {validator: validateDegree, trigger: 'blur'}
                    ],
                    carNum: [
                        {required: true, message: '请填写车牌号', trigger: 'blur'},
                        {validator: validateCarNum, trigger: 'blur'}
                    ]
                },
                showPopupPicker: false,
                temperature: [],
                temperatureList: [
                    {key: 1, value: '正常'},
                    {key: 2, value: '发热'}
                ]
            }
        },
        mounted() {
            if (this.$route.query.role) this.role = this.$route.query.role
            if (this.$route.query.qrresult) this.tk = this.$route.query.qrresult
            this.getData()
        },
        methods: {
            getData() {
                this.$vux.loading.show()
                this.$http.post('/recorder/recordInfoForMe').then(result => {
                    if (result.success && result.data) {
                        this.result = {
                            name: result.data.name,
                            idType: '身份证',
                            cardId: result.data.cardId,
                            idCardImg: result.data.idCardImg,
                            phone: result.data.phone,
                            address: result.data.addrLocal,
                            hsDepartment: result.data.hsDepartment,
                            type: result.data.type,
                            recordCount: result.data.recordCount,
                            familyMember: result.data.familyMember,
                            appointmentTime: result.data.appointmentTime,
                            appointmentToday: !result.data.appointmentToday
                        }
                        this.ruleForm.carNum = result.data.carNum
                        this.$vux.loading.hide()
                    }
                })
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        this.$vux.toast.text(obj[Object.keys(obj)[0]][0].message, 'middle')
                        return false
                    }
                })
            },
            submit(callback) {
                this.$http.post('/recorder/takeRecordForMe', {
                    action: this.role,
                    goOut: this.goOutValue ? 1 : 2,
                    healthStatus: this.ruleForm.temperature.key,
                    remark: this.ruleForm.degree.trim(),
                    strategy: 1,
                    tk: this.tk,
                    carNum: this.ruleForm.isDrive ? this.ruleForm.carNum.trim() : ''
                }).then(result => {
                    if (result.success) {
                        if (callback) callback()
                    }
                })
            },
            submitForm() {
                let _this = this, type = this.ruleForm.temperature.key
                this.validate('ruleForm', () => {
                    this.submit(() => {
                        _this.$router.replace({
                            path: '/registrationInfo',
                            query: {
                                type: type === 1 ? 0 : 1,
                                name: _this.result.name,
                                hsDepartment: _this.result.hsDepartment,
                                // goOutValue: _this.goOutValue,
                                degree: _this.ruleForm.degree,
                                carNum: _this.ruleForm.isDrive ? _this.ruleForm.carNum : ''
                            }
                        })
                    })
                })
            },
            normalToggle() {
                this.showNormal = true
                this.normalFlag = false
            },
            feverToggle() {
                this.showFever = true
                this.$nextTick(() => {
                    this.degree = ''
                })
                this.feverFlag = false
            },
            onCancelN() {
                this.normalFlag = true
            },
            onCancelF() {
                this.feverFlag = true
            },
            switchChange(value) {
            },
            saveCarNum(carNum) {
                if (carNum || carNum === '') this.ruleForm.carNum = carNum
                this.showCarPop = false
            },
            // 车牌号输入框获取焦点
            focus() {
                this.showCarPop = true
            }
        },
        components: {
            Group,
            XSwitch,
            Confirm,
            XInput,
            InlineXSwitch,
            Checker,
            CheckerItem,
            carNumPop
        }
    }
</script>

<style scoped lang="less">
    .degreeInp {
        /deep/ .weui-cells {
            &::after {
                content: '';
                display: none;
            }

            &::before {
                content: '';
                display: none;
            }
        }
    }

    .auditBox {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #fff;
        padding-bottom: .9rem;

        .info {
            background-color: #4078ff;
            padding-top: .5rem;
            padding-bottom: .2rem;

            .title {
                position: relative;
                /*padding: 0 0 .3rem;*/
                margin-bottom: .5rem;
                background-color: #4078ff;

                .name {
                    color: #fff;
                    font-size: .36rem;
                    font-weight: 700;
                    text-align: center;
                    height: .48rem;
                    line-height: .48rem;
                }

                .registrationOut {
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-color: rgb(207, 112, 207);
                    padding: 0 .2rem;
                    line-height: .48rem;
                    color: #fff;
                    font-size: .28rem;
                    border-radius: 0 .48rem .48rem 0;
                }

                .registrationInp {
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-color: rgb(87, 203, 207);
                    padding: 0 .2rem;
                    line-height: .48rem;
                    color: #fff;
                    font-size: .28rem;
                    border-radius: 0 .48rem .48rem 0;
                }
            }

            li {
                color: #fff;
                min-height: .48rem;
                line-height: .48rem;
                padding: 0 .2rem 0 .3rem;
                margin-bottom: .1rem;

                div {
                    text-align: left;
                    overflow: hidden;

                    &:nth-child(1) {
                        float: left;
                        width: 1.6rem;
                    }

                    &:nth-child(2) {
                        position: relative;
                        margin-left: 1.6rem;
                    }
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        /deep/ .form {
            padding-top: .4rem;
            border-top: 1px solid #eee;

            .el-form-item {
                position: relative;
                font-size: .28rem;
                background-color: #fff;
                margin-bottom: 0;
                padding: .2rem 0 0 0;

                .normal,
                .fever {
                    float: left;
                    margin-right: .6rem;

                    .el-image {
                        width: 2rem;
                        margin-left: .15rem;
                    }
                }

                .vux-cell-box {
                    position: absolute;
                    right: 0;
                    top: -.75rem;
                    width: 100%;
                }

                .el-form-item__label {
                    color: #333;
                    padding: 0 0 0 .3rem;
                    font-size: .36rem;
                    line-height: .68rem;
                    margin-bottom: .2rem;
                    font-weight: bolder;
                }

                &.custom-label {
                    /*padding: .1rem .2rem;*/

                    .el-form-item__label {
                        /*padding-left: 0;*/
                        width: 100%;
                        padding: 0 .3rem;
                        margin-bottom: 0;

                        .is-required {
                            &:before {
                                content: '*';
                                color: #F56C6C;
                                margin-right: 4px;
                            }
                        }

                        .weui-switch {
                            float: right;
                            width: 1.04rem;
                            height: .56rem;
                            border-radius: .32rem;
                            margin-top: .06rem;

                            &:before {
                                width: 1rem;
                                height: .52rem;
                                border-radius: .3rem;
                            }

                            &:after {
                                width: .52rem;
                                height: .52rem;
                                border-radius: .3rem;

                            }

                            &:checked {
                                &:after {
                                    transform: translateX(.48rem);
                                }
                            }
                        }
                    }
                }

                .el-form-item__content {
                    overflow: hidden;
                    font-size: .28rem;
                    line-height: .68rem;
                    padding: .1rem .3rem;
                    font-size: .32rem;
                }

                .weui-cells_checkbox {
                    .weui-icon-checked {
                        &:before {
                            font-size: .34rem;
                        }
                    }

                    .weui-check:checked + .vux-checklist-icon-checked {
                        &:before {
                            color: #409EFF;
                        }
                    }
                }

                .el-button {
                    font-size: .28rem;
                }

                .form-group {
                    .weui-cells {
                        &:before, &:after {
                            border: 0 none;
                        }

                        margin-top: 0;
                        font-size: .28rem;

                        .weui-cell {
                            padding: .15rem .2rem;

                            &:before {
                                border: 0 none;
                            }
                        }

                        .vux-cell-value {
                            color: inherit;
                        }
                    }
                }

                &.form-item-top {
                    margin-top: -.2rem;
                    border-top: 1px solid #eee;
                }

                .vux-checker-box {
                    .ckecker-item {
                        width: 2rem;
                        /*background-color: #eee;*/
                        margin-right: .6rem;
                        height: 1.2rem;
                        line-height: 1.2rem;
                        /*text-align: center;*/
                        /*border-radius: .03rem;*/

                        .el-image {
                            width: 100%;
                            height: 100%;
                        }

                        &:hover, &:active {
                            background-color: transparent;
                        }
                    }
                }

                &.degree {
                    .el-form-item__label {
                        margin-bottom: 0;
                        float: left;
                        /*line-height: .48rem;*/
                        padding: .1rem .3rem;
                    }

                    .el-form-item__content {
                        height: .68rem;
                        text-align: right;

                        .placeholder {
                            color: #999;
                        }
                    }
                }

                .el-input {
                    font-size: .28rem;

                    input {
                        padding: 0 .2rem;
                        /*border: 0 none;*/
                        height: .68rem;
                        line-height: .68rem;
                        border-radius: 2px;
                        border-color: #DCDFE6;
                    }
                }
            }
        }
    }

    .submit {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: .88rem;
        line-height: .88rem;
        border-radius: 0;
        margin: 0;
        z-index: 5;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            box-shadow: 0 0 5px 0px #b1b1b1;
            height: 1px;
            width: 100%;
            z-index: 0;
        }

        > div {
            /*float: left;*/
            /*width: 50%;*/
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .back {
            background-color: #fff;
        }

        .primary {
            color: #fff;
            background-color: #6D97FF;
        }
    }
</style>
